<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animation: Unfold</title>
    <meta name="description" content="Animation: Unfold - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-mixin id="board" geometry="depth: .05; height: 1; width: 6" material="shader: flat"
                 pivot="0 0.5 0" position="0 -1 0"></a-mixin>
        <a-mixin id="unhinge" attribute="rotation" to="0 0 0" dur="1000" fill="both"></a-mixin>
        <img id="shadow" src="../../assets/img/radial-shadow-2.png">
      </a-assets>

      <!-- Series of nested boards that unfold one by one. -->
      <a-entity position="0 0 -8" scale="1 1 1">
        <!-- Animate rotation and position of group for extra visual flair. -->
        <a-animation attribute="position" to="0 5 -8" dur="2000"></a-animation>
        <a-animation attribute="rotation" from="0 60 0" to="0 30 0" dur="2500"></a-animation>

        <!-- Pivot and position are used to set the "hinge" of each board to it's top edge. -->
        <a-box mixin="board" color="#F16745">
          <a-animation mixin="unhinge" from="-20 0 0" delay="1000"></a-animation>

          <a-box mixin="board" color="#FFC65D">
            <a-animation mixin="unhinge" from="-175 0 0" delay="250"></a-animation>

            <a-box mixin="board" color="#7BC8A4">
              <a-animation mixin="unhinge" from="-180 0 0" delay="500"></a-animation>

              <a-box mixin="board" color="#4CC3D9">
                <a-animation mixin="unhinge" from="-180 0 0" delay="750"></a-animation>

                <a-box mixin="board" color="#93648D">
                  <a-animation mixin="unhinge" from="-180 0 0" delay="1000"></a-animation>
                </a-box>
              </a-box>
            </a-box>
          </a-box>
        </a-box>
      </a-entity>

      <a-image position="0 -1 0" src="#shadow" rotation="-90 0 0" scale="6 6 6"></a-image>
      <a-sky color="#ECECEC"></a-sky>
      <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#fff"></a-light>
    </a-scene>
  </body>
</html>
